<template>
  <div class="CPT_Clock" :style="hoursStyle.area">
    <div class="relative">
      <CircleArea
        :time="otime.secound + from"
        :dt="secounds"
        :circle-style="reverseClock ? secoundsStyle : hoursStyle"
        :font-size="dfontSize"
        :angle="angleS"
      />
      <CircleArea
        :time="otime.minute + from"
        :dt="minutes"
        :circle-style="minutesStyle"
        :font-size="dfontSize"
        :angle="angleM"
      />
      <CircleArea
        :time="otime.hour"
        :dt="hours"
        :circle-style="reverseClock ? hoursStyle : secoundsStyle"
        :font-size="dfontSize"
        :angle="angleH"
      />
    </div>
  </div>
</template>
<script>
import CircleArea from "./chip/CircleArea"
export default {
  inheritAttrs: false,
  name: "CPT_Clock",
  components: { CircleArea },
  props: {
    size: {
      type: [String, Number],
      default: 300,
    },
    sep: {
      //时分秒层间距
      type: [String, Number],
      default: 10,
    },
    fontSize: {
      type: [String, Number],
      default: 14,
    },
    from: {
      //第一个数字从哪个开始0、1
      //之影响分秒
      type: Number,
      default: 0,
    },
    reverseClock: {
      //是否与常规表盘指针相反-长短顺序
      type: Boolean,
      default: false,
    },
  },
  computed: {
    sizeAstrict() {
      if (this.reverseClock) {
        return {
          hour: {
            min: 100,
            max: 100,
          },
          minute: {
            min: 80,
            max: 240,
          },
          secound: {
            min: 80,
            max: 240,
          },
        }
      } else {
        return {
          hour: {
            min: 100,
            max: 100,
          },
          minute: {
            min: 80,
            max: 200,
          },
          secound: {
            min: 80,
            max: 200,
          },
        }
      }
    },
    dsize() {
      return parseInt(this.size) || 300
    },
    dsep() {
      return parseInt(this.sep) || 10
    },
    dfontSize() {
      let fontSize = parseInt(this.fontSize) || 14
      return fontSize + "px"
    },
    minuteSize() {
      return this.dsize - 4 * this.dsep
    },
    secoundSize() {
      return this.dsize - 8 * this.dsep
    },
    hoursStyle() {
      let size = this.dsize,
        sep = this.dsep
      return {
        s: {
          left: size - sep + "px",
          width: sep * 2 + "px",
          height: size + "px",
        },
        area: {
          width: size * 2 + "px",
          height: size * 2 + "px",
        },
      }
    },
    minutesStyle() {
      let size = this.dsize,
        sep = this.dsep,
        height = this.minuteSize
      return {
        s: {
          left: size - 5 * sep + "px",
          width: sep * 2 + "px",
          height: height + "px",
        },
        area: {
          top: 4 * sep + "px",
          left: 4 * sep + "px",
          width: height * 2 + "px",
          height: height * 2 + "px",
        },
      }
    },
    secoundsStyle() {
      let size = this.dsize,
        sep = this.dsep,
        height = this.secoundSize
      return {
        s: {
          left: size - 9 * sep + "px",
          width: sep * 2 + "px",
          height: height + "px",
        },
        area: {
          top: 8 * sep + "px",
          left: 8 * sep + "px",
          width: height * 2 + "px",
          height: height * 2 + "px",
        },
      }
    },
    otime() {
      let time = this.time.split(":"),
        fullHour = parseInt(time[0]),
        minute = parseInt(time[1]),
        secound = parseInt(time[2]),
        hour = fullHour > 12 ? fullHour - 12 : fullHour
      return {
        hour,
        fullHour,
        minute,
        secound,
      }
    },
    angleH() {
      let hourSize = this.dsize,
        { hour } = this.sizeAstrict,
        { min } = hour,
        r = 0
      if (hourSize > min) {
        let { hour } = this.otime
        if (!isNaN(hour)) {
          r = hour * 30
        }
      }
      return r
    },
    angleM() {
      let r = 0,
        minuteSize = this.minuteSize,
        { minute } = this.sizeAstrict,
        { min } = minute
      if (minuteSize > min) {
        let { minute, fullHour } = this.otime,
          from = this.from
        if (!isNaN(minute)) {
          r = fullHour * 360 + minute * 6 + from * 6
        }
      }
      return r
    },
    angleS() {
      let secoundSize = this.reverseClock ? this.secoundSize : this.dsize,
        { secound } = this.sizeAstrict,
        { min } = secound,
        r = 0
      if (secoundSize > min) {
        let { fullHour, minute, secound } = this.otime,
          from = this.from
        if (!isNaN(secound)) {
          r = (fullHour * 60 + minute) * 360 + secound * 6 + from * 6
        }
      }
      return r
    },
  },
  data() {
    return {
      hours: [],
      minutes: [],
      secounds: [],
      time: "",
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.initHours()
      this.initMinutes()
      this.initSecounds()
      this.initTime()
    },
    initTime() {
      this.timer = this.$setInterval(
        () => {
          this.time = this.$getFullDateTime(new Date(), "time")
        },
        1000,
        this.timer
      )
    },
    initHours() {
      let r = [],
        total = 12,
        hourSize = this.dsize,
        { hour } = this.sizeAstrict,
        { min } = hour
      for (let i = 1; i <= total; i++) {
        let visible = false
        if (hourSize < min) {
          let v = Math.round(min / hourSize)
          if (i % v === 0) {
            visible = true
          }
        } else if (hourSize === min) {
          if (i % 2 === 0) {
            visible = true
          }
        } else {
          visible = true
        }
        r.push({
          id: i,
          label: i,
          visible,
          angle: (360 / total) * i,
        })
      }
      this.hours = r
    },
    initMinutes() {
      let r = [],
        minuteSize = this.minuteSize,
        from = this.from,
        i = from,
        total = 60,
        stotal = total + i,
        { minute } = this.sizeAstrict,
        { min, max } = minute

      for (; i < stotal; i++) {
        let visible = false
        if (minuteSize > max) {
          visible = true
        } else if (minuteSize < min) {
          visible = false
        } else {
          let v = Math.round(max / minuteSize)
          if (i % v === 0) {
            visible = true
          }
        }
        r.push({
          id: i,
          label: i,
          visible,
          angle: (360 / total) * i,
        })
      }
      this.minutes = r
    },
    initSecounds() {
      let r = [],
        secoundSize = this.reverseClock ? this.secoundSize : this.dsize,
        from = this.from,
        i = from,
        total = 60,
        stotal = total + i,
        { secound } = this.sizeAstrict,
        { min, max } = secound
      for (; i < stotal; i++) {
        let visible = false
        if (secoundSize > max) {
          visible = true
        } else if (secoundSize < min) {
          visible = false
        } else {
          let v = Math.round(max / secoundSize)
          if (i % v === 0) {
            visible = true
          }
        }
        r.push({
          id: i,
          label: i,
          visible,
          angle: (360 / total) * i,
        })
      }
      this.secounds = r
    },
  },
}
</script>
<style lang="scss" scoped>
.hoursArea {
  position: absolute;
  transition: $trans5;
  z-index: 1;
  border-radius: 50%;
  border: 1px $dark1 solid;
  // box-shadow: $dark1 0 0 $dis10;
}
.minutesArea {
  position: absolute;
  transition: $trans5;
  z-index: 2;
  border-radius: 50%;
  border: 1px $dark1 dashed;
  // box-shadow: $dark1 0 0 $dis10;
}
.secoundsArea {
  position: absolute;
  transition: $trans5;
  z-index: 3;
  border-radius: 50%;
  border: 1px $dark1 dashed;
  // box-shadow: $dark1 0 0 $dis10;
}
.secounds {
  position: absolute;
  display: flex;
  justify-content: center;
  transform-origin: 50% 100%;
  transition: $trans5;
  color: $dark5;
  padding-top: $dis10;
  &::before {
    content: "";
    width: 4px;
    height: 4px;
    top: $dis5;
    position: absolute;
    background-color: $dark3;
    border-radius: 2px;
  }
  &.visible {
    &::before {
      display: none;
    }
  }
  &.active {
    color: $blue;
    &::before {
      background-color: $blue;
    }
  }
}
.minutes {
  position: absolute;
  display: flex;
  justify-content: center;
  transform-origin: 50% 100%;
  transition: $trans5;
  color: $dark5;
  padding-top: $dis10;
  &::before {
    content: "";
    width: 4px;
    height: 4px;
    top: $dis5;
    position: absolute;
    background-color: $dark3;
    border-radius: 2px;
  }
  &.visible {
    &::before {
      display: none;
    }
  }
  &.active {
    color: $blue;
    // background: linear-gradient(
    //   to right,
    //   rgba(255, 255, 255, 0) 0%,
    //   #fff 20%,
    //   #fff 80%,
    //   rgba(255, 255, 255, 0) 100%
    // );
    &::before {
      display: none;
    }
  }
}
.hours {
  position: absolute;
  display: flex;
  justify-content: center;
  transform-origin: 50% 100%;
  color: $dark5;
  padding-top: $dis10;
  &::before {
    content: "";
    width: 4px;
    height: 4px;
    top: $dis5;
    position: absolute;
    background-color: $dark3;
    border-radius: 2px;
  }
  &.visible {
    &::before {
      display: none;
    }
  }
  &.active {
    color: $blue;
    &::before {
      background-color: $blue;
    }
  }
}
</style>
